<template>
  <view class="container">
    <!-- 状态栏和时间 -->
    <view class="status-bar">
      <text class="time">09:56</text>
    </view>
    <!-- 导航栏 -->
    <view class="nav-bar">
      <text class="title">网易云音乐</text>
      <view class="user-info">
        <text class="username">云村村民16031026255317</text>
        <text class="logout">退出登录</text>
      </view>
    </view>
    <!-- 搜索框 -->
    <view class="search-box" >
      <input @tap="handleTosearch" class="search-input" placeholder="Q搜索歌曲" placeholder-class="placeholder-style"/>
    </view>

    <!-- 轮播图 -->
    <swiper 
      class="banner-swiper"
      :autoplay="true"
      :interval="4000"
      :circular="true"
      @click="handleBannerClick"
    >
      <swiper-item 
        v-for="(item, index) in swiperList" 
        :key="index"
        :data-url="item.link"
      >
        <image 
          class="swiper-img"
          :src="item.image"
          mode="aspectFill"
        />
      </swiper-item>
    </swiper>
    <!-- 榜单列表 - 统一左图右文布局 -->
    <!-- 榜单列表 - 修改点击事件绑定 -->
    <view class="chart-list">
      <block v-for="(chart, index) in charts" :key="index">
        <view class="chart-item">
          <view class="chart-layout">
            <!-- 左侧图片 -->
            <view class="chart-cover-wrapper" @tap="handleToList(chart.id)">
              <image 
                class="chart-cover"
                :src="chart.imgUrl"
                mode="aspectFill"
              />
              <text class="update-info" :style="{
                position: 'absolute', 
                bottom: '8rpx', 
                left: '8rpx', 
                color: 'white', 
                fontSize: '20rpx'
              }">{{ chart.updateInfo }}</text>
            </view>
            <!-- 右侧内容 -->
            <view class="chart-content" @tap="handleToList(chart.id)">
              <view class="chart-header">
                <text class="update-info">{{ chart.updateInfo }}</text>
              </view>
              <view class="song-list">
                <view v-for="(song, i) in chart.songs" :key="i" class="song-item">
                  <text class="rank">{{ i + 1 }}.</text>
                  <text class="song-name">{{ song.name }}</text>
                  <text class="singer">- {{ song.singer }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
import { topList } from '@/common/api.js';

export default {
  data() {
    return {
      swiperList: [
        {
          image: "/static/banner1.jpg",
          link: "/pages/detail/index?id=1"
        },
        {
          image: "/static/banner2.jpg",
          link: "/pages/detail/index?id=2"
        },
        {
          image: "/static/banner3.jpg",
          link: "/pages/detail/index?id=3"
        },
        {
          image: "/static/banner4.jpg",
          link: "/pages/detail/index?id=4"
        }
      ],
      charts: [],
      loading: false,
      error: null,
      coverImages: {}
    };
  },
  onLoad() {
    topList().then((res)=>{
      if(res.length){
        console.log('榜单列表：', res);
        res.forEach((item)=>{
          console.log(`榜单ID：${item.id}，名称：${item.name}`);
          var chart={title:item.name,id:item.id,updateInfo:item.updateFrequency,songs:[],imgUrl:item.coverImgUrl}
          item.tracks.forEach((song)=>{
            chart.songs.push({name:song.first,singer:song.second})
          })
          this.charts.push(chart)
        })
      }
    });
    setTimeout(()=>{console.log(this.charts)},1000)			
  },
  methods: {
    handleToList(id){
      uni.navigateTo({url:'/pages/list/list?listid='+id});
    },
	handleTosearch(){
		uni.navigateTo({url:"/pages/search/search"});
	}
  }
};
</script>

<style lang="scss">
/* 轮播图样式 */
.banner-swiper {
  height: 300rpx;
  border-radius: 20rpx;
  margin: 20rpx;
  overflow: hidden;
  .swiper-img {
    width: 100%;
    height: 100%;
  }
}

/* 统一榜单布局 */
.chart-list {
  .chart-item {
    background: white;
    border-radius: 20rpx;
    margin: 20rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
    
    .chart-layout {
      display: flex;
      gap: 20rpx;
    }

    .chart-cover-wrapper {
      position: relative;
      width: 220rpx;
      height: 220rpx;

      .chart-cover {
        width: 100%;
        height: 100%;
        border-radius: 12rpx;
        flex-shrink: 0;
      }

      .update-frequency {
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 4rpx 8rpx;
        font-size: 20rpx;
        border-bottom-left-radius: 12rpx;
      }
    }

    .chart-content {
      flex: 1;
      min-width: 0; /* 防止内容溢出 */
    }

    .chart-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15rpx;
  padding-right: 10rpx; /* 添加右侧内边距 */
  align-items: center;
}

    .update-info {
      font-size: 24rpx;
      color: #999;
    }

    .song-list {
      .song-item {
        display: flex;
        align-items: center;   // 垂直居中
        margin: 16rpx 0;
        font-size: 28rpx;
        line-height: 1.4;
        width: 100%;          // 确保宽度占满父容器
    
        .rank {
          color: #d43c33;
          width: 50rpx;       // 固定宽度（适应 1-99 的序号）
          text-align: right;  // 序号右对齐
          margin-right: 10rpx;
          flex-shrink: 0;     // 防止被压缩
        }
    
        .song-name {
          color: #333;
          flex: 1;            // 占据剩余空间
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding-right: 10rpx; // 与歌手名保持间距
        }
    
        .singer {
          color: #999;
          flex-shrink: 0;     // 防止被压缩
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          max-width: 40%;     // 限制歌手名最大宽度
        }
      }
    }
  }
}

/* 其他原有样式保持不变 */
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.status-bar {
  padding: 20rpx;
  .time {
    font-size: 32rpx;
    color: #333;
  }
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #d43c33;
  }
  .user-info {
    .username {
      color: #666;
      margin-right: 20rpx;
    }
    .logout {
      color: #d43c33;
    }
  }
}

.search-box {
  background: #fff;
  border-radius: 40rpx; 
  margin: 20rpx;
  padding: 20rpx;
  .search-input {
    font-size: 28rpx;
  }
  .placeholder-style {
    color: #999;
  }
}
</style>